<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>添加角色</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/static/css/layui.css" />
	<link rel="stylesheet" href="/static/css/common.css" />
</head>

<body>
	<form class="layui-form" action="" lay-filter="editform">
		<div class="mainBox">
			<div class="main-container">
				<div class="main-container">
					<div class="layui-form-item">
						<label class="layui-form-label">角色名称</label>
						<div class="layui-input-block">
							<input type="text" name="name" lay-verify="required" autocomplete="off"
								placeholder="请输入角色名称" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">状态</label>
						<div class="layui-input-block">
							<input type="radio" name="status" value="0" title="开启" checked>
							<input type="radio" name="status" value="1" title="关闭">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">菜单列表</label>
						<div class="layui-input-block">
							<div id="treearea"></div>
						</div>
					</div>

					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">备注</label>
						<div class="layui-input-block">
							<textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="layui-btn layui-btn-lg layui-btn-warm" lay-submit=""
					lay-filter="user-save">
					<i class="layui-icon layui-icon-ok"></i>
					提交
				</button>
			</div>
		</div>
	</form>

	<script src="/static/js/layui.js"></script>
	<script>
		layui.extend({
			api: '{/}/static/js/api'
		});
		layui.use(['api'], function () {
			let api = layui.api;
			let form = layui.form
				, layer = layui.layer
				, $ = layui.$
				, tree = layui.tree;

			//渲染
			api.get('auth/addTree', res => {
				tree.render({
					elem: '#treearea'//绑定元素
					, showCheckbox: true
					, data: res
					, id: 'trees' //定义索引
				});
			});


			//监听提交
			form.on('submit(user-save)', function (data) {
				data = data.field;
				let arr = tree.getChecked('trees');
				let list = [];
				let treeIds = function (arr) {
					for (const item of arr) {
						list.push(item.id);
						let subs = item.children;
						if (subs && subs.length > 0) {
							treeIds(subs, list);
						}
					}
					return list.join(',');	//以逗号拼接返回
				}
				data.rules = treeIds(arr);
				api.post('auth/add', data, res => {
					//console.log(res)
					parent.layui.table.reload("role-table");
					parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页

				})

				return false;
			});



		});
	</script>

</body>

</html>